<template>
  <div class="dropdown" @click="perentClick">
    <div class="dropdown-label" @click="expendClick">{{ label }}</div>
    <div class="dropdown-content" v-if="visable">
      <!-- <div class="dropdown-item" @click="itemClick(0)">
        <div class="dropdown-item-left">
          <img class="icon" src="@/assets/img/lock.png" alt="" />
        </div>
        <div class="dropdown-item-middle">修改密码</div>
        <div class="dropdown-item-right">
          <img class="icon" src="@/assets/img/jt.png" alt="" />
        </div>
      </div> -->
      <div class="dropdown-item" @click="itemClick(1)">
        <div class="dropdown-item-left">
          <img class="icon" src="@/assets/img/tc.png" alt="" />
        </div>
        <div class="dropdown-item-middle">退出登录</div>
        <div class="dropdown-item-right">
          <img class="icon" src="@/assets/img/jt.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const emit = defineEmits(['itemClick'])

const props = defineProps({
  label: {
    type: String,
    default: 'Dropdown'
  }
})
const visable = ref(false)

const itemClick = (param) => {
  emit('itemClick', param)
  visable.value = false
}

onMounted(() => {
  document.addEventListener('click', (e) => {
    if (visable.value) {
      visable.value = false
    }
  })
})

const expendClick = () => {
  visable.value = !visable.value
}

const perentClick = (e) => {
  e.stopPropagation()
}
</script>

<style lang="scss" scoped>
.dropdown {
  position: relative;
  .dropdown-label {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 13px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    &::after {
      content: '';
      display: block;
      width: 11px;
      height: 6px;
      background: url('@/assets/img/down.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
  .dropdown-content {
    width: 200px;
    position: absolute;
    padding: 30px 15px;
    box-sizing: border-box;
    top: calc(100% + 15px);
    transform: translateX(-50%);
    background: rgba(4, 21, 21, 0.8);
    border-radius: 10px;
    border: 1px solid #07a680;
    z-index: 10;
    .dropdown-item {
      width: 100%;
      cursor: pointer;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 14px;
      .dropdown-item-left {
        .icon {
          display: block;
          width: 18px;
          height: 18px;
        }
      }
      .dropdown-item-middle {
        flex: 1;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 13px;
      }
      .dropdown-item-right {
        .icon {
          display: block;
          width: 7px;
          height: 12px;
        }
      }
    }
    & > .dropdown-item:not(:last-child) {
      margin-bottom: 35px;
    }
  }
}
</style>
